<template>
    <div class="main-container" :style="{ height: screenHeight + 'px' }">
        <div class="imgListBar">
            <div v-for="(url, index) in imgList" :key="index" class="imgListBar_content" @click="changeItem(url, index)"
                :class="selectIndex == index ? 'active' : ''">
                <img :src="url.sysPatientPhotoList[0].photoAddress" lazy fit="contain" class="imgListBar_content_img"
                    :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }">
                <div class="imgListBar_content_text">
                    {{ url.faceLightName }}
                </div>
            </div>

        </div>
        <div class="imgShowContainers">
            <div class="imgShowContainers_img_name" v-if="CurrentObj.faceLightName=='原图'">
                <!-- {{ CurrentObj.faceLightName }} -->
                {{ this.setTitle(showphotoAddress,CurrentObj) }}

            </div>
            <div class="imgShowContainers_img_name" v-else>
                {{this.setTitle0(CurrentObj.faceLightName,CurrentObj) }}
            </div>
            <div class="imgShowContainers_img_content left" @mousewheel.prevent="rollImg"
                :style="{ height: imgShowContainerH + 'px' }">
                <!-- <img :src="showphotoAddress" fit="contain" class="imgShowContainers_img img" ref="imgDiv"
                    :style="{ transform: 'scale(' + zoomD + ')' }" @mousedown="move" /> -->

                <el-image :src="showphotoAddress" fit="contain" class="imgShowContainers_img img" ref="imgDiv"
                    v-if="showphotoAddress" :style="{ transform: 'scale(' + zoomD + ')' }" @mousedown="move">
                    <div slot="placeholder" class="image-slot">
                        <img src="@/assets/images/loading.gif" alt="" class="image-slot-img">
                    </div>
                </el-image>
            </div>
            <div class="optionBtn_group">
                <div class="imgOptionBar_Btn1" @click="changPicEventone(-1)">
                    <el-tooltip class="item" effect="dark" content="上一张" placement="left">
                        <i class="el-icon-d-arrow-left imgOptionBar_Icon"></i>
                    </el-tooltip>

                </div>
                <div class="imgOptionBar_Btn_text">
                    <span style="font-size:14px;color:red;" v-if="CurrentObj && CurrentObj.sysPatientPhotoList">{{
                        selectPICIndex + 1 }} / {{
        CurrentObj.sysPatientPhotoList.length }}张</span>
                </div>
                <div class="imgOptionBar_Btn1" @click="changPicEventone(1)">
                    <el-tooltip class="item" effect="dark" content="下一张" placement="right">
                        <i class="el-icon-d-arrow-right imgOptionBar_Icon"></i>
                    </el-tooltip>

                </div>
            </div>
        </div>
        <div class="imgOptionBar">
            <div class="imgOptionBar_Btn" @click="closed">
                <el-tooltip class="item" effect="dark" content="关闭" placement="left">
                    <i class="el-icon-circle-close imgOptionBar_Icon"></i>
                </el-tooltip>

            </div>
            <div class="imgOptionBar_Btn" @click="changPicEvent(-1)">
                <el-tooltip class="item" effect="dark" content="上一组" placement="left">
                    <i class="el-icon-d-arrow-left imgOptionBar_Icon0"></i>
                </el-tooltip>

            </div>
            <div class="imgOptionBar_Btn" @click="changPicEvent(1)">
                <el-tooltip class="item" effect="dark" content="下一组" placement="left">
                    <i class="el-icon-d-arrow-right imgOptionBar_Icon1"></i>
                </el-tooltip>

            </div>

        </div>
    </div>
</template>
  
<script>

import { getpIndexPhotoList } from "@/api/photoWorkstation/photoList";
export default {
    name: 'analysisPics',
    props: ["imgArray", 'myImgIndex', 'currentUrl', 'pIndex'],
    data() {
        return {
            imgList: [

            ],
            showphotoAddress: '',
            allImgList: [],
            CurrentObj: {},
            selectIndex: 0,
            selectPICIndex: 0,
            zoomD: 1,
            screenHeight: 0,
            imgHeight: 0,//图片高度
            imgWidth: 0, //图片宽度
            imgShowContainerH: 0//显示图片高度
        }
    },
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandler)
    },
    mounted() {
        this.getpIndexPhotoListEvent()
        let ratio = window.devicePixelRatio || 1;
        console.log('ratio---', window.devicePixelRatio)
        window.screenHeight = document.body.clientHeight;
        this.screenHeight = window.screenHeight;
        this.imgHeight = (this.screenHeight / 13 - 24) > 40 ? 30 : (this.screenHeight / 13 - 24)
        this.imgWidth = this.imgHeight * 0.75
        // console.log(this.screenHeight);
        this.imgShowContainerH = this.screenHeight - 40

    },
    methods: {
        $_resizeHandler() {
            window.screenHeight = document.body.clientHeight;
            this.screenHeight = window.screenHeight;
            this.imgHeight = (this.screenHeight / 13 - 24) > 40 ? 30 : (this.screenHeight / 13 - 24)
            this.imgWidth = this.imgHeight * 0.75
            this.imgShowContainerH = this.screenHeight - 40
            // console.log(this.screenHeight);
        },
        closed() {
            this.$emit("closedEvent")
        },
        changPicEvent(num) {
            let index = this.selectIndex + num
            if (index < 0) {
                this.$message.warning('已经是第一组了~')
            } else if (index > this.imgList.length - 1) {
                this.$message.warning('已经是最后一组了~')
            } else {
                this.changeItem(this.imgList[index], index)
            }
        },
        changPicEventone(num) {
            let index = this.selectPICIndex + num
            if (index < 0) {
                this.$message.warning('已经是第一张了~')
            } else if (index > this.CurrentObj.sysPatientPhotoList.length - 1) {
                this.$message.warning('已经是最后一张了~')
            } else {
                this.selectPICIndex = index
                console.log(this.CurrentObj.sysPatientPhotoList)
                this.showphotoAddress = this.CurrentObj.sysPatientPhotoList[index].photoAddress
                console.log(this.showphotoAddress)
            }
        },
        //移动demo
        move(e) {
            e.preventDefault();
            // 获取元素
            var personBox = document.querySelector(".left");
            var img = document.querySelector(".img");
            var x = e.pageX - img.offsetLeft;
            var y = e.pageY - img.offsetTop;

            // 添加鼠标移动事件
            console.log(x)
            personBox.addEventListener("mousemove", move);
            function move(e) {
                img.style.left = e.pageX - x + "px";
                img.style.top = e.pageY - y + "px";
                img.style.position = "absolute";
            }
            // 添加鼠标抬起事件，鼠标抬起，将事件移除
            img.addEventListener("mouseup", function () {
                personBox.removeEventListener("mousemove", move);
            });
            // 鼠标离开父级元素，把事件移除
            personBox.addEventListener("mouseout", function () {
                personBox.removeEventListener("mousemove", move);
            });
        },
        // 缩放图片
        rollImg(e) {
            let direction = e.deltaY > 0 ? 'down' : 'up'
            if (direction === 'up') {
                // 滑轮向上滚动
                this.large();
            } else {
                // 滑轮向下滚动
                this.Small();
            }
        },
        //缩小按钮方法
        zoomMin() {
            this.Small();
        },
        //放大按钮方法
        zoomMax() {
            this.large();
        },

        //大
        large() {
            this.$nextTick(() => {
                if (this.zoomD < 6) {
                    this.zoomD += 0.10
                }
                document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`
            })
        },
        // 小
        Small() {
            this.$nextTick(() => {
                if (this.zoomD > 0.3) {
                    this.zoomD -= 0.10
                }
                document.querySelector('.img').style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`
            })
        },
        setTitle0(name,obj){
            if(obj&&obj.sysPatientPhotoList&&obj.sysPatientPhotoList.length>0){
                let dataObj=obj.sysPatientPhotoList[this.selectPICIndex]
                let  facePart=dataObj.facePart=='1'?'-正脸':dataObj.facePart=='0'?'-左脸':dataObj.facePart=='2'?'-右脸':''
                return name+facePart
            }
           
        },
        setTitle(url,obj) {
            if(obj&&obj.sysPatientPhotoList&&obj.sysPatientPhotoList.length>0){
            let dataObj=obj.sysPatientPhotoList[this.selectPICIndex]
            let  facePart=dataObj.facePart=='1'?'-正脸':dataObj.facePart=='0'?'-左脸':dataObj.facePart=='2'?'-右脸':''
            if (url.indexOf('data_result_purple') > -1 || url.indexOf('data_result__purple') > -1) {
                return '紫外线'+facePart
            } else if (url.indexOf('data_result_brown') > -1) {

                return '棕色区'+facePart
            } else if (url.indexOf('data_result_pores') > -1) {
                return 'RGB 毛孔'+facePart
            } else if (url.indexOf('data_result_red') > -1) {
                return '肤色均匀度'+facePart
            } else if (url.indexOf('data_result_rgbrough') > -1) {
                return 'PL粗糙度'+facePart
            } else if (url.indexOf('data_result_rgbspots') > -1) {
                return 'RGB 色斑'+facePart
            } else if (url.indexOf('data_result_rgbtexture') > -1 || url.indexOf('data_result_texture') > -1) {
                return 'RGB 纹理'+facePart
            } else if (url.indexOf('data_result_uvacne') > -1) {
                return '紫质'+facePart
            } else if (url.indexOf('data_result_uvrough') > -1) {
                return 'uv水润度'+facePart
            } else if (url.indexOf('data_result_uvspots') > -1) {
                return 'uv色素'+facePart
            } else if (url.indexOf('data_result_whiten') > -1) {
                return '美白图'+facePart
            } else if (url.indexOf('data_result_aging') > -1) {
                return '老化图'+facePart
            } else if (url.indexOf('/poralize_') > -1) {
                return '原图(偏振光)'+facePart
            } else if (url.indexOf('/rgb_') > -1) {
                return '原图(RGB光)'+facePart
            } else if (url.indexOf('/uv_') > -1) {
                return '原图(UV光)'+facePart
            } else {
                return '原图'+facePart
            }
        }
        },
        getpIndexPhotoListEvent() {
            let params = {
                pIndex: this.pIndex
            }
            getpIndexPhotoList(params).then((response) => {
                if (response && response.code == 200) {
                    let data = response.data
                    // data_result_purple  紫外线 data_result__purple
                    //data_result_brown 棕色区
                    //data_result_pores  RGB 毛孔
                    // data_result_red  肤色均匀度
                    // data_result_rgbrough PL粗糙度
                    // data_result_rgbspots RGB 色斑
                    //data_result_rgbtexture  RGB 纹理  data_result_texture
                    // data_result_uvacne 紫质
                    // ata_result_uvrough uy水润度 data_result_uvrough
                    // data_result_uvspots uv色素
                    //合成列表集合
                    let dataImgList = data[0].entities.concat(data[1].entities)
                    this.sliceImglist(data[0].entities, dataImgList)
                    // this.imgList = data[0].entities.concat(data[1].entities)
                    // data.forEach(item => {
                    //       if(item.photoAddress.indexOf('data_result_purple')>-1||item.photoAddress.indexOf('data_result__purple')>-1){
                    //         item.photoName='紫外线'
                    //       }else if(item.photoAddress.indexOf('data_result_brown')>-1){
                    //         item.photoName='棕色区'
                    //       }else if(item.photoAddress.indexOf('data_result_pores')>-1){
                    //         item.photoName='RGB 毛孔'
                    //       }else if(item.photoAddress.indexOf('data_result_red')>-1){
                    //         item.photoName='肤色均匀度'
                    //       }else if(item.photoAddress.indexOf('data_result_rgbrough')>-1){
                    //         item.photoName='PL粗糙度'
                    //       }else if(item.photoAddress.indexOf('data_result_rgbspots')>-1){
                    //         item.photoName='RGB 色斑'
                    //       }else if(item.photoAddress.indexOf('data_result_rgbtexture')>-1||item.photoAddress.indexOf('data_result_texture')>-1){
                    //         item.photoName='RGB 纹理'
                    //       }else if(item.photoAddress.indexOf('data_result_uvacne')>-1){
                    //         item.photoName='紫质'
                    //       }else if(item.photoAddress.indexOf('data_result_uvrough')>-1){
                    //         item.photoName='uy水润度'
                    //       }else if(item.photoAddress.indexOf('data_result_uvspots')>-1){
                    //         item.photoName='uv色素'
                    //       }else if(item.photoAddress.indexOf('data_result_whiten')>-1){
                    //         item.photoName='美白图'
                    //       }else if(item.photoAddress.indexOf('data_result_aging')>-1){
                    //         item.photoName='老化图'
                    //       }else if(item.photoAddress.indexOf('/poralize_')>-1){
                    //         item.photoName='原图(偏振光)'
                    //       }else if(item.photoAddress.indexOf('/rgb_')>-1){
                    //         item.photoName='原图(RGB光)'
                    //       }else if(item.photoAddress.indexOf('/uv_')>-1){
                    //         item.photoName='原图(UV光)'
                    //       }else{
                    //         item.photoName='原图'
                    //       }
                    // })
                    // this.imgList = data

                } else {
                    this.$modal.msgWarning(response.msg);
                }

            });
        },
        sliceImglist(data, origLists) {
            let picAiList = []
            let obj = {
                faceLight: '0',
                faceLightName: '原图(黄褐斑)',
                sysPatientPhotoList: []
            }
            data[0].sysPatientPhotoList.forEach(item => {
                if (item.faceLight == '1') {
                    obj.sysPatientPhotoList.push(item)
                }
            })
            picAiList.push(obj)
            let origLists1 = origLists.concat(picAiList)
            this.sliceImglist1(data,origLists1)
        },
        sliceImglist1(data, origLists) {
            let picAiList = []
            let obj = {
                faceLight: '0',
                faceLightName: '原图(痤疮)',
                sysPatientPhotoList: []
            }
            data[0].sysPatientPhotoList.forEach(item => {
                if (item.faceLight == '1') {
                    obj.sysPatientPhotoList.push(item)
                }
            })
            picAiList.push(obj)
            this.imgList = origLists.concat(picAiList)
            this.CurrentObj = this.imgList[0]
            this.selectPICIndex = 0
            this.showphotoAddress = this.CurrentObj.sysPatientPhotoList[this.selectPICIndex].photoAddress
        },
        changeItem(item, index) {
            this.selectIndex = index
            this.selectPICIndex = 0
            this.CurrentObj = this.imgList[index]
            this.showphotoAddress = this.CurrentObj.sysPatientPhotoList[this.selectPICIndex].photoAddress
        },
    }
}
</script>
  
<style lang="scss" scoped>
/* 加载前 */
::v-deep .imgShowContainers_img_content .el-image__error {
    background: transparent !important;
    color: #fff !important;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;

    .imgOptionBar {
        position: fixed;
        width: 36px;
        top: 50px;
        right: 10px;
        height: 90vh;
        overflow-y: auto;
        z-index: 8;

        &_Btn_text {
            height: 36px;
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        &_Btn1 {
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            text-align: center;
            line-height: 36px;
            padding-top: 4px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 6px;
            box-sizing: border-box;

        }

        // background:rgba(0,0,0,0.5);
        &_Btn {
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            text-align: center;
            line-height: 36px;
            padding-top: 4px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 6px;
            box-sizing: border-box;
            margin-bottom: 12px;
        }

        &_Icon {
            font-size: 28px;
            color: #fff;
        }

        &_Icon0 {
            font-size: 28px;
            color: #fff;
            transform: rotate(90deg);
        }

        &_Icon1 {
            font-size: 28px;
            color: #fff;
            transform: rotate(90deg);
        }
    }

    .imgListBar {
        position: fixed;
        width: 88px; //100%;
        padding: 4px;
        //bottom: 8px;
        top: 0px;
        left: 0px;
        height: 100vh; //calc(100vh - 60px); //65px;
        overflow-y: auto;
        z-index: 8;
        // background:rgba(255,255,255,1);

        &_content.active {
            border: 1px solid red;
        }

        &_content {
            padding: 1px;
            width: 80px;
            // height: 48px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin: 0 auto;
            // float: left;
            margin-bottom: 2px;
            cursor: pointer;
            border-radius: 4px;
            background: #000;


            &_img {
                width: 22.5px;
                height: 30px;
                display: block;
                margin: 0 auto;
                border-radius: 4px;

            }

            &_text {
                text-align: center;
                font-size: 12px;
                transform: scale(0.8);
                line-height: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #fff;
            }
        }


    }

    ::v-deep .imgListBar::-webkit-scrollbar {
        width: 2px;
    }

    ::v-deep .imgListBar::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: #1890FF;
        cursor: pointer;
        z-index: 999;
    }

    .imgShowContainers {
        width: 100%;
        height: 100%;
        position: relative;

        .optionBtn_group {
            position: fixed;
            bottom: 10px;
            z-index: 10;
            left: 50%;
            transform: translateX(-50%);
            width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &_img_name {
            font-size: 18px;
            text-align: center;
            line-height: 40px;
            // background:#f3a4a1;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &_img_content {
            height: calc(100vh - 40px);
            padding-top: 8px;
            padding-bottom: 8px;
            overflow: hidden;
            position: relative;
        }

        &_img {

            height: 100%;
            display: block;
            margin: 0 auto;
            cursor: move;

            .image-slot {
                width: 200px;
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

                .image-slot-img {
                    width: 100%;
                }
            }
        }
    }
}
</style>
  